[CSS] font-smoothing 속성 사용방법, 폰트 부드럽게 만들기

웹페이지의 폰트를 부드럽게 사용하기 위해서 css의 font-smoothing 속성을 사용할 수 있습니다. 아래는 이를 적용하는 방법과 효과에 대하여 알아봅니다.

# CSS의 -webkit-font-smoothing 속성 알아보기

CSS의 스타일 속성 중 하나로 -webkit-font-smoothing 속성이 있습니다. 이 속성을 적용하면 브라우저에 표현되는 텍스트가 렌더링될 때 부드럽게 표현되는 장점이 있습니다.

즉 폰트를 더 부드럽게 사용하기 위해서 사용하는 스타일 속성입니다. 이런 이유로 많은 웹페이지에서 사용되는 텍스트 스타일 속성입니다. 아래와 같이 사용합니다.

-webkit-font-smoothing: antialiased;

다만 이 속성은 표준 속성이 아니라 모든 브라우저 및 환경에서 구현되지 않습니다. Webkit 기반의 Safari 및 Mac 등에서 완벽히 구현되며 이 외에는 제한적으로 사용됩니다. 그럼 아래에서 이 속성에 적용 가능한 값을 알아봅니다.

1. auto
2. antialiased
3. none
일반적으로 두 번째 값 antialiased를 사용합니다. auto 역시 사용할 수 있으니 텍스트 효과를 브라우저가 결정하게 됩니다.

@ 참고사항
여기서 antialiased는 anti + aliased를 뜻합니다. 해석하면 aliased를 제거한다는 뜻으로 계단처럼 렌더링 되는 부분을 부드럽게 표현하는 효과를 말합니다.

! -webkit-font-smoothing 예제보기

그럼 간단한 예제를 만들고 확인해보려고 합니다. 현재 웹사이트에 적용하기 위해 아래와 같이 css 코드를 추가할 수 있습니다. 전체에 적용하기 위해 body에 스타일을 적용했습니다.

여기서 아래의  -moz-osx-font-smoothing 코드가 추가된 것을 확인할 수 있습니다. 이 코드는 Firefox 브라우저에서 적용하기 위한 방법입니다. 선택 가능한 값은 두 가지 입니다.

동일하게 auto는 브라우저가 결정합니다. grayscale값 역시 antialiasing 효과가 적용됩니다. 이 코드 역시 Mac을 사용하는 환경에서 적용이 제한됩니다.

! 마치면서

참고로 font-smooth 속성이 있으나 표준이 아닙니다. antialiase 효과가 웹표준에서 제외된 이유는 무엇일까요? 이 속성을 적용하는 것에 대하여 찬반과 장단점이 존재합니다. 그런 이유로 어두운 바탕에 밝은 텍스트인 경우가 아니면 반드시 적용해야 하는지 아니면 브라우저에 판단하도록 할 것인지 결정이 필요합니다.